<template>
  <div class="mv_contanier">
    <div class="mv_wrap">
      <div class="related_mv">
        <div class="mv_item" v-for="mv in relatedMv" :key="mv.id">
          <router-link to="#" class="mv_cover">
            <img :src="`${mv.imgurl}?param=137y103`" :alt="`${mv.name}`" />
          </router-link>
          <div class="mv_name">{{ `${mv.name}` }}</div>
          <SvgIcon class="iconfont" icon="icon-bofang2"></SvgIcon>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <Pagination
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @currentChange="currentChange"
    ></Pagination>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Mv',
}
</script>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { reqArtistMv } from '@/api/singerDetail'
import type {
  RelatedMvItem,
  RelatedMvList,
} from '@/api/modules/singerDetailModel'
import SvgIcon from '@/components/SvgIcon/index.vue'
import Pagination from '@/components/Pagination/index.vue'

// 相关Mv数据
const relatedMv = ref<RelatedMvList>([
  {
    artisName: '',
    id: '', // mv id
    duration: '', // 时长
    imgurl: '', // 封面图片
    name: '', // mv名
    playCount: '', // 播放数
    publishTime: '', // 发布时间
  },
])
// 分页器相关数据
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
// 通过路由参数获取歌手id
const route = useRoute()
const id = route.query.id as string
// 获取相关Mv数据
const getRelatedMv = async () => {
  const res = await reqArtistMv({
    id,
    limit: pageSize.value,
    offset: (currentPage.value - 1) * 12,
  })
  // console.log(res)
  relatedMv.value = res.mvs
}
onMounted(async () => {
  // 更新分页器数据
  const result = await reqArtistMv({ id, limit: 1000, offset: 0 })
  total.value = result.mvs.length // 获取当前歌手所有mv数量
})
// 分页切换
const currentChange = async (newVal: number) => {
  // console.log('当前页改变')
  currentPage.value = newVal // 更新当前页
}
watch(
  () => currentPage.value,
  async (newVal) => {
    await getRelatedMv()
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.mv_contanier {
  width: 640px;
  margin: 20px 0 10px 0;
  .mv_wrap {
    width: 640px;
    .related_mv {
      display: flex;
      width: 666px;
      justify-content: left;
      align-items: center;
      flex-wrap: wrap;
      .mv_item {
        position: relative;
        width: 166px;
        height: 170px;
        img {
          width: 137px;
          height: 103px;
        }
        .mv_name {
          width: 137px;
          color: #000;
          font-size: 14px;
          margin: 8px 0 3px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
        .iconfont {
          position: absolute;
          left: 52px;
          top: 30px;
          font-size: 38px;
          z-index: 999;
          &:hover {
            cursor: pointer;
            background-color: #444;
            border-radius: 22px;
          }
        }
      }
    }
  }
}
</style>
